<script setup lang="ts">
import { navigate } from '@/utils/navigate';

interface IProps {
  variantIds: string;
  show: boolean;
  selectAddress?: IListShippingAddressesRes;
  addressList: IListShippingAddressesRes[];
}

type EmitEvents = {
  (event: 'change', payload: { show: boolean }): void;
  (event: 'select', payload: { data: IListShippingAddressesRes }): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
</script>

<template>
  <van-popup position="bottom" round :show="props.show" @close="emits('change', { show: false })">
    <view class="flex c-pd justify-between">
      <view></view>
      <text class="fw-bold">选择收货地址</text>
      <i class="i-si:close-fill text-18px" @click="emits('change', { show: false })" />
    </view>
    <view class="bg-white w-full">
      <scroll-view class="overflow-hidden min-h-200px max-h-400px pb-12px" scroll-y v-if="props.addressList.length > 0">
        <template v-for="(item, index) in props.addressList.filter((i) => i.state)" :key="index">
          <view class="flex items-center px-12px" @click="emits('select', { data: item })">
            <i class="i-grommet-icons:radial-selected c-color mr-8px" v-if="item.harvestAddressId === props.selectAddress?.harvestAddressId" />
            <view class="flex-1">
              <view class="fw-bold">
                <text class="c-bg px-8px c-text-12 c-br mr-4px" v-if="item.beeperId">呼叫器地址</text>
                {{ item.address || '' }} {{ item.villageName || '' }}{{ item.buildName || '' }}{{ item.unitName || '' }}{{ item.floorName || '' }}{{ item.houseNumber || '' }}
              </view>
              <view class="c-text-color-grey c-text-12 mt-12px">
                <text class="mr-8px">{{ item.linkName }}</text>
                <text>{{ item.phone }}</text>
              </view>
            </view>
            <i
              class="i-mingcute:right-fill text-22px"
              @click="navigate({ url: `/subcontract/person/shippingAddress/addressEdit?beeperId=${item.beeperId || ''}&relationBeeperId=${item.relationBeeperId || ''}&harvestAddressId=${item.harvestAddressId}&variantIds=${props.variantIds}` })"
            />
          </view>
          <van-divider v-if="index < props.addressList.length - 1"></van-divider>
        </template>
        <van-divider contentPosition="center" v-if="props.addressList.filter((i) => i.state === 0).length > 0">以下地址超出配送范围</van-divider>
        <template v-for="(item, index) in props.addressList.filter((i) => i.state === 0)" :key="index">
          <view class="flex items-center px-12px opacity-50">
            <i class="i-grommet-icons:radial-selected c-color mr-8px" v-if="item.harvestAddressId === props.selectAddress?.harvestAddressId" />
            <view class="flex-1">
              <view class="fw-bold">
                <text class="c-bg px-8px c-text-12 c-br mr-4px" v-if="item.beeperId">呼叫器地址</text>
                {{ item.address || '' }} {{ item.villageName || '' }}{{ item.buildName || '' }}{{ item.unitName || '' }}{{ item.floorName || '' }}{{ item.houseNumber || '' }}
              </view>
              <view class="c-text-color-grey c-text-12 mt-12px">
                <text class="mr-8px">{{ item.linkName }}</text>
                <text>{{ item.phone }}</text>
              </view>
            </view>
            <i
              class="i-mingcute:right-fill text-22px"
              @click="navigate({ url: `/subcontract/person/shippingAddress/addressEdit?beeperId=${item.beeperId || ''}&relationBeeperId=${item.relationBeeperId || ''}&harvestAddressId=${item.harvestAddressId}&variantIds=${props.variantIds}` })"
            />
          </view>
          <van-divider v-if="index < props.addressList.length - 1"></van-divider>
        </template>
      </scroll-view>
      <view v-else>
        <van-empty description="该地址下没有小区信息" />
      </view>
    </view>
    <view class="px-12px">
      <van-button type="primary" plain block @click="navigate({ url: `/subcontract/person/shippingAddress/addressEdit?variantIds=${props.variantIds}` })"> 添加地址 </van-button>
    </view>
  </van-popup>
</template>
